import React, { useState } from "react";
// 新
import ReactDOM from "react-dom/client";

import "./index.css";
let data = [
  {
    category: "Sporting Goods",
    price: "$49.99",
    stocked: true,
    name: "Football",
  },
  {
    category: "Sporting Goods",
    price: "$9.99",
    stocked: true,
    name: "Baseball",
  },
  {
    category: "Sporting Goods",
    price: "$29.99",
    stocked: false,
    name: "Basketball",
  },
  {
    category: "Electronics",
    price: "$99.99",
    stocked: true,
    name: "iPod Touch",
  },
  {
    category: "Electronics",
    price: "$399.99",
    stocked: false,
    name: "iPhone 5",
  },
  { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" },
];
// let title = [...new Set(data.map((item) => item.category))];
function FilterableProductTable() {
  const handleChange = (e) => {
    let name = e.target.name;
    let value = name === "inText" ? e.target.value : !formData.isChecked;
    setFromData({
      ...formData,
      [name]: value,
    });
  };

  const [formData, setFromData] = useState({
    inText: "",
    isChecked: false,
  });

  return (
    <div>
      <SearchBar handleChange={handleChange} formData={formData} />
      <ProductTable formData={formData} />
    </div>
  );
}
function SearchBar(props) {
  let { handleChange, formData } = props;
  return (
    <form className="SearchBar">
      <label>
        <input
          type="text"
          placeholder="请输入搜索"
          name="inText"
          value={formData.inText}
          onChange={handleChange}
        />
      </label>
      <label>
        <input
          type="checkbox"
          name="isChecked"
          value={formData.isChecked}
          onChange={handleChange}
        />
        Only show products in stock
      </label>
    </form>
  );
}
function ProductTable(props) {
  let { formData } = props;

  let lastCategody = null;
  const rows = [];
  data.forEach((ele) => {
    if (ele.name.indexOf(formData.inText) === -1) {
      return;
    }
    if (formData.isChecked && !ele.stocked) {
      return;
    }
    console.log(ele);
    if (ele.category !== lastCategody) {
      rows.push(<ProductCategoryRow name={ele.category} key={ele.category} />);
      lastCategody = ele.category;
    }
    rows.push(
      <ProductRow
        name={ele.name}
        stocked={ele.stocked}
        price={ele.price}
        key={ele.name}
      />
    );
  });
  return (
    <div className="productTable">
      <div className="title">
        <span>Name</span>
        <span>Price</span>
      </div>
      {rows}
    </div>
  );
}
function ProductCategoryRow(props) {
  return (
    <div className="productCategoryRow">
      <div className="title">
        <span>{props.name}</span>
      </div>
    </div>
  );
}
function ProductRow(props) {
  return (
    <div className="ProductRow">
      <div className="title">
        <span className={props.stocked ? "goodsName" : "goodsEmptyName"}>
          {props.name}
        </span>
        <span className="goodsPrice">{props.price}</span>
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<FilterableProductTable />);
